<template>
	<view class="app-apply e-rela">
		<image class="app-apply__bg1" :src="$staticPath('string/string_bg1.png')" mode="scaleToFill"></image>
		<image class="app-apply__bg z-index2" :src="$staticPath('string/string_bg1.png')" mode="widthFix"></image>
		<view class="app-apply__content">
			<view class="e-p-l-20 e-p-r-20">
				<view class="e-radius-20 app-apply__panel e-m-b-30">
					<view class="e-radius-20 bg-white app-apply__panel--input e-flex e-p-r-30">
						<view class="e-p-l-30 c-333 e-font-32 e-flex-1">输入数量：</view>
						<input type="number" v-model="num" placeholder="请输入数量" border="none" style="text-align: right;"/>
					</view>
				</view>
				<view class="e-flex">
					<view class="app-apply__cancel e-flex-xy-center e-m-r-18 e-flex-1" @tap="$goTo('/pages/string/cancel')">
						<text class="e-font-32 w-500 c-white">取消申请</text>
					</view>
					<view class="app-apply__confirm e-flex-xy-center e-flex-1" @tap="handleApply">
						<text class="e-font-32 w-500 c-white">{{applyStatus ? '申请中' : '开始申请'}}</text>
					</view>
				</view>
			</view>
		</view>
		<e-popup class="popup" bgColor="transparent" :show="show" mode="center">
		    <view class="app-apply__popup e-rela">
				<image :src="$staticPath('order/close.png')" mode="" class="img-28 app-apply__popup--close" @tap="show = false"></image>
				<view class="e-p-t-40 e-p-b-40 e-flex-xy-center">
					<text class="c-333 e-font-32 w-600">开始申请</text>
				</view>
				<view class="e-p-l-46 e-p-r-44 e-m-b-20">
					<view class="app-apply__popup--item e-flex c-333 e-font-32">
						<view class="e-flex-1">
							兑换包
						</view>
						<text>{{info.packNumber || 0}}</text>
					</view>
					<view class="app-apply__popup--item e-flex c-333 e-font-32">
						<view class="e-flex-1">
							需持有的消费积分
						</view>
						<text>{{info.deductionXFMoney || 0}}</text>
					</view>
					<view class="app-apply__popup--item e-flex c-333 e-font-32">
						<view class="e-flex-1">
							预计获得优惠券
						</view>
						<text>{{info.money || 0}}</text>
					</view>
				</view>
				<view class="e-flex-xy-center e-p-l-46 e-p-r-44">
					<view class="app-apply__popup--cancel e-m-r-20 e-flex-1 e-flex-xy-center" @tap="show = false">
						<text class="e-font-30 w-500" style="color: #8C8C8C;">取消</text>
					</view>
					<view class="app-apply__popup--confirm e-flex-1 e-flex-xy-center" @tap="submit">
						<text class="e-font-30 w-500 c-white">确定</text>
					</view>
				</view>
		    </view>
		</e-popup>
	</view>
</template>

<script>
	import {applyMonthPre,applyMonth,checkApply} from '@/common/request/api'
	import { setRequestHeader } from '@/common/request'
	export default {
		data() {
			return {
				loading:false,
				num:'',
				info:{},
				show:false,
				applyStatus:false
			}
		},
		onLoad(){
			this.handleCheck()
			// #ifdef APP
			uni.sendNativeEvent(
				'autoLogin',
				{
					msg: 'sendAutoLogin'
				},
				(ret) => {
					let params = {
						code: ret,
						salt: uni.getStorageSync('userSalt')
					};
					postSupperAppLogin(params)
						.then(async (res) => {
							uni.removeStorageSync('userSalt');
							uni.setStorageSync('token', res.data.access_token)
							setRequestHeader()
							this.$pinia.state.value?.user?.getUserInfo?.()
							
						})
				}
			);
			// #endif
		},
		methods:{
			handleCheck() {
				uni.showLoading()
				checkApply({releaseType:2}).then(res => {
					this.applyStatus = res.data
				}).finally(() => {
					uni.hideLoading()
				})
			},
			handleApply() {
				if(this.applyStatus) return
				if (!this.num) {
					return this.$toastApp('请输入数量')
				}
				if (this.loading) return
				this.loading = true
				uni.showLoading()
				applyMonthPre({num:this.num}).then(res => {
					if (res.code == 200) {
						this.info = res.data
						this.show = true
					}
				}).finally(() =>{
					this.loading = false
					uni.hideLoading()
				})
			},
			submit() {
				this.show = false
				if (this.loading) return
				this.loading = true
				uni.showLoading()
				applyMonth({num:this.num}).then(res => {
					if (res.code == 200) {
						setTimeout(() => {
							this.$toastApp('申请成功')
						},1000)
						
						this.handleCheck()
						this.num = ''
					}
				}).finally(() =>{
					uni.hideLoading()
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.z-index2{
		position: relative;
		z-index: 2;
	}
	@include appBem_b(apply) {
		height: 100vh;
		@include appBem_e(bg) {
			width: 100vw;
		}
		@include appBem_e(bg1) {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		@include appBem_e(content) {
			position: fixed;
			bottom: 198rpx;
			width: 100vw;
			z-index: 999;
		}
		@include appBem_e(panel) {
			height: 182rpx;
			background: #4B68E3;
			padding: 40rpx 20rpx;
			@include appBem_m(input) {
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: inset 0px -1rpx 0px 0px #EDEDED;
			}
		}
		@include appBem_e(cancel) {
			height: 100rpx;
			border-radius: 50rpx;
			border: 2rpx solid #76787B;
		}
		@include appBem_e(confirm) {
			height: 100rpx;
			background: #F99A31;
			border-radius: 50rpx;
		}
		@include appBem_e(popup) {
			width: 670rpx;
			height: 664rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			@include appBem_m(close) {
				position: absolute;
				top: 48rpx;
				right: 30rpx;
			}
			@include appBem_m(item) {
				height: 120rpx;
			}
			@include appBem_m(cancel) {
				height: 100rpx;
				border-radius: 50rpx;
				border: 2rpx solid #EFEFEF;
			}
			@include appBem_m(confirm) {
				height: 100rpx;
				border-radius: 50rpx;
				background: #4B68E3;
			}
		}
	}
	.img-458 {
		width: 458rpx;
	}
</style>